<template>
        <div class="lookWrap">
                <h4>房屋信息</h4>
                <ul class="houseInfo">
                        <li>
                                <p>房屋编号：<span>D8-8-112</span></p>
                                <p>楼盘名称：<span>六必居8期</span></p>
                        </li>
                        <li>
                                <p>当前状态：<span>跟进中</span></p>
                                <p>当前节点：<span>签字领证</span></p>
                        </li>
                 </ul>
                 <div class="unusual">
                         <div>
                             <p>操作人：<span>李菲菲</span></p>
                             <p>操作角色：<span>产权公司</span></p>
                             <p>操作账号：<span>13923422342</span></p>
                         </div>
                         <div>
                                 <div style="width:80px;">异常原因：</div>
                                 <div style="flex:1;">异常原因异常原因异常原因异常原因异常原因</div>
                         </div>
                 </div>
                 <ul class="houseInfo">
                         <li>
                                 <p>业主姓名：<span>王小丫，南京</span></p>
                                 <p>业主电话：<span>13812312313，13811291410</span></p>
                         </li>
                         <li>
                                 <p>证件类型：<span>身份证</span></p>
                                 <p>证件号码：<span>110223189923742342342</span></p>
                         </li>
                         <li>
                                 <p>购房资质：<span>持本市工作居住证</span></p>
                                 <p>购房方式：<span>贷款</span></p>
                         </li>
                         <li>
                                 <p>婚姻状况：<span>未婚</span></p>
                         </li>
                  </ul>
                  <h4>跟进详情</h4>
                  <ul class="followList">
                          <li class="active">
                                  <div class="title">
                                          <p>2018-09-89</p>
                                          <h5>签字领证（已完成）</h5>
                                   </div>
                                   <div class="unusual">
                                           <div>
                                               <p>操作人：<span>李菲菲</span></p>
                                               <p>操作角色：<span>产权公司</span></p>
                                               <p>操作账号：<span>13923422342</span></p>
                                           </div>
                                           <div style="margin:15px 0;">
                                                   <div style="width:85px;">相关附件：</div>
                                                   <div style="flex:1;" class="Enclosure">
                                                           <p>
                                                                   <img src="http://kfcdn.lifeat.cn/120190329115356904.jpg" alt="">
                                                                   <span>这是小票</span>
                                                           </p>
                                                           <p>
                                                                   <img src="./PDF.jpg" alt="">
                                                                   <span>这是pdf</span>
                                                           </p>
                                                   </div>
                                           </div>
                                           <div>
                                                   <div style="width:85px;">备注：</div>
                                                   <div style="flex:1;">异常原因异常原因异常原因异常原因</div>
                                           </div>
                                   </div>
                          </li>
                          <li class="active">
                                  <div class="title">
                                          <p>2018-09-89</p>
                                          <h5>签字领证（已完成）</h5>
                                   </div>
                                   <div class="unusual">
                                           <div>
                                               <p>操作人：<span>李菲菲</span></p>
                                               <p>操作角色：<span>产权公司</span></p>
                                               <p>操作账号：<span>13923422342</span></p>
                                           </div>
                                           <div style="margin:15px 0;">
                                                   <div style="width:85px;">相关附件：</div>
                                                   <div style="flex:1;" class="Enclosure">
                                                           <p>
                                                                   <img src="http://kfcdn.lifeat.cn/120190329115356904.jpg" alt="">
                                                                   <span>这是小票</span>
                                                           </p>
                                                           <p>
                                                                   <img src="./PDF.jpg" alt="">
                                                                   <span>这是pdf</span>
                                                           </p>
                                                   </div>
                                           </div>
                                           <div>
                                                   <div style="width:85px;">备注：</div>
                                                   <div style="flex:1;">异常原因异常原因异常原因异常原因</div>
                                           </div>
                                   </div>
                          </li>
                          <li class="active">
                                  <div class="title">
                                          <p>2018-09-89</p>
                                          <h5>签字领证（已完成）</h5>
                                   </div>
                                   <div class="unusual">
                                           <div>
                                               <p>操作人：<span>李菲菲</span></p>
                                               <p>操作角色：<span>产权公司</span></p>
                                               <p>操作账号：<span>13923422342</span></p>
                                           </div>
                                           <div style="margin:15px 0;">
                                                   <div style="width:85px;">相关附件：</div>
                                                   <div style="flex:1;" class="Enclosure">
                                                           <p>
                                                                   <img src="http://kfcdn.lifeat.cn/120190329115356904.jpg" alt="">
                                                                   <span>这是小票</span>
                                                           </p>
                                                           <p>
                                                                   <img src="./PDF.jpg" alt="">
                                                                   <span>这是pdf</span>
                                                           </p>
                                                   </div>
                                           </div>
                                           <div>
                                                   <div style="width:85px;">备注：</div>
                                                   <div style="flex:1;">异常原因异常原因异常原因异常原因</div>
                                           </div>
                                   </div>
                          </li>
                  </ul>
        </div>
</template>

<script>
export default {
        data(){
                return {

                }
        }
}
</script>

<style lang="stylus" scoped>
        h4{
                border-bottom: 1px solid #ccc;
                padding-bottom:10px;
        }
        ul,li{
                list-style: none;
        }
        .houseInfo{
                li{
                        display: flex;
                        p{
                                flex: 1;
                        }
                }
        }
        .unusual{
                padding-left: 40px;
                &>div{
                        display: flex;
                        p{
                                flex: 1;
                        }
                }
        }
        .followList{
                margin-left: 150px;
                border-left: 2px solid #ccc;
                padding-left: 0;
                li{
                        position: relative;
                        margin-bottom: 50px;
                        &:before{
                                content: "";
                                width: 20px;
                                height: 20px;
                                background: #ccc;
                                border-radius: 100%;
                                position: absolute;
                                left: -11px;
                        }
                        .title{
                                display: flex;
                                align-items: center;
                                p{
                                        margin: 0;
                                        margin-left: -105px;
                                        font-size: 15px;
                                }
                                h5{
                                        margin: 0;
                                        margin-left: 60px;
                                        font-size: 16px;
                                }
                        }
                        .Enclosure{
                                overflow: hidden;
                                p{
                                        width: 200px;
                                        height: 200px;
                                        float: left;
                                        margin: 0;
                                        margin-right: 15px;
                                        img{
                                                display: block;
                                                width: 100%;
                                                height: 150px;
                                        }
                                        span{
                                                margin-top: 5px;
                                                display: block;
                                        }
                                }
                        }
                        .unusual{
                                padding-left: 32px;
                        }
                }
                .active{
                        &:before{
                                content: "";
                                width: 20px;
                                height: 20px;
                                background: #ff9900;
                                border-radius: 100%;
                                position: absolute;
                                left: -11px;
                        }
                }
        }
</style>
